<template>
  <div class="detail">
    <van-nav-bar
        :title="business.businessName"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-card
      :title="business.businessName"
      :desc="`月销售${business.month_sales}+份`"
      :thumb="business.businessImg"
    />
    <van-tabbar v-model="active" route @change="handleChange">
      <van-tabbar-item :class="{'van-tabbar-item--active': active == 0}" :to="`/business/detail/foods?id=${$route.query.id}`" icon="home-o">点菜</van-tabbar-item>
      <van-tabbar-item :class="{'van-tabbar-item--active': active == 1}" :to="`/business/detail/info?id=${$route.query.id}`" icon="search">商家</van-tabbar-item>
    </van-tabbar>
    <router-view v-slot="{ Component }" :business="business">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      active: '',
      id: '',
      business: {}
    }
  },
  methods: {
    _initBusiness() {
      this.$axios.get(`/ele_server_war/business/getById?id=${this.id}`)
          .then(({data: res}) => {
            if (res.status == 0) {
              this.business = res.data;
            } else {
              alert(res.message)
            }
          })
    }
  },
  setup() {
      const onClickLeft = () => history.back();
      return {
        onClickLeft,
      };
    },
  created() {
    this.id = this.$route.query.businessId;
    this._initBusiness();
  }
}
</script>

<style scoped lang="stylus">
.van-tabbar--fixed
  position relative
</style>